<template>
    <div class="goods-general">
        <swiper :aspect-ratio="1.8/2" :list="swiperList" v-model="swiperIndex"></swiper>
        <index-general-kill></index-general-kill>
        <div class="general-basic">
            <div class="basic-name">
                <div class="name-left">
                    <img src="//st.360buyimg.com/so/images/search/jd-send-icon.png">
                    <p>名福 食用油 非转基因 核桃橄榄原香食用调和油5L</p>
                </div>
                <div class="name-right">
                    <i class="iconfont">&#xe64f;</i>
                    <span>关注</span>
                </div>
            </div>
            <div class="basic-price">
                <div class="price-value">
                    <label>￥</label>
                    <span class="value-big">149</span>
                    <span class="value-small">.90</span>
                </div>
                <div class="price-inform">
                    <span>降价通知</span>
                </div>
            </div>
        </div>
        <div class="general-coupon-activity">
            <div class="coupon">
                <div class="coupon-name">
                    <span>领券</span>
                </div>
                <div class="coupon-value">
                    <span>满10减5</span>
                    <span>满49减10</span>
                </div>
                <div class="coupon-menu">
                    <span>共2张</span>
                    <i class="iconfont">&#xe627;</i>
                </div>
            </div>
            <div class="activity">
                <div class="activity-name">
                    <span>促销</span>
                </div>
                <div class="activity-value">
                    <span>此价格不与套餐优惠同时享受</span>
                </div>
                <div class="activity-menu">
                    <i class="iconfont">&#xe627;</i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	import {Swiper} from "vux";
	import indexGeneralKill from './index-genaral-kill'

	export default {
		data () {
			return {
				swiperList: [
					{
						url: "javascript:",
						img:
							"https://m.360buyimg.com/n12/s824x824_jfs/t9958/8/1638437389/20043/372722d2/59e42830N1afe7736.jpg!q70.jpg.webp"
					},
					{
						url: "javascript:",
						img:
							"https://m.360buyimg.com/n12/s824x824_jfs/t9787/309/1633930906/65379/8fb80cc0/59e42831N83d658b3.jpg!q70.jpg.webp"
					},
					{
						url: "javascript:",
						img:
							"https://m.360buyimg.com/n12/jfs/t10639/290/1648891820/31320/2f39ac90/59e42830Ndf5e6577.jpg!q70.jpg"
					}
				],
				swiperIndex: 1,
			}
		},
		components: {
			Swiper,
			indexGeneralKill
		}
	}
</script>

<style lang="less" scoped>
    @import '../../static/less/var';

    .goods-general {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: @background-color;
        overflow-x: hidden;
        overflow-y: auto;
        .general-basic {
            position: relative;
            padding: 0 10px;
            background-color: white;
            .basic-name {
                display: flex;
                padding: 5px 0;
                .name-left {
                    flex: 1;
                    line-height: 18px;
                    img {
                        display: inline-block;
                        width: 60px;
                        height: 15px;
                    }
                    p {
                        font-size: 14px;
                        display: inline;
                        word-break: break-all;
                    }
                }
                .name-right {
                    flex-basis: 50px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    i {
                        font-size: 20px;
                    }
                    span {
                        font-size: 14px;
                    }
                }
            }
            .basic-price {
                display: flex;
                justify-content: space-between;
                padding-bottom: 5px;
                .price-value {
                    display: flex;
                    flex-grow: 0;
                    align-items: flex-end;
                    color: #f23030;
                    label {
                        font-size: 16px;
                    }
                    .value-big {
                        font-size: 19px;
                    }
                    .value-small {
                        font-size: 19px;
                    }
                }
                .price-inform {
                    span {
                        padding: 3px 5px;
                        border: 1px solid @divider-color;
                        border-radius: 5px;
                        font-size: 14px;
                        color: gray;
                    }
                }
            }
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 0;
                content: '';
                border-bottom: 1px solid @border-color;
                transform: scaleY(0.5);
            }
            &::after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                content: '';
                border-bottom: 1px solid @border-color;
                transform: scaleY(0.5);
            }
        }
        .general-coupon-activity {
            position: relative;
            padding-left: 10px;
            margin: 10px 0;
            background: white;
            .coupon{
                position: relative;
                display: flex;
                height: 50px;
                align-items: center;
                font-size: 14px;
                .coupon-name{
                    flex-basis: 35px;
                    span{
                        color:gray;
                    }
                }
                .coupon-value{
                    flex:1;
                    span{
                        padding:0 5px;
                        font-size: 12px;
                        background: #de181b;
                        color:white;
                    }
                }
                .coupon-menu{
                    flex-basis: 70px;
                    box-sizing: border-box;
                    padding-right:10px;
                }
                &::after {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 0;
                    content: '';
                    border-bottom: 1px solid @border-color;
                    transform: scaleY(0.5);
                }
            }
            .activity{
                display: flex;
                height: 50px;
                align-items: center;
                font-size: 14px;
                .activity-name{
                    flex-basis: 35px;
                    span{
                        color:gray;
                    }
                }
                .activity-value{
                    flex:1;
                    span{
                        padding:0 5px;
                        font-size: 12px;
                        color:gray;
                    }
                }
                .activity-menu{
                    display: flex;
                    justify-content: flex-end;
                    flex-basis: 70px;
                    box-sizing: border-box;
                    padding-right:10px;
                }
            }
            &::before {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 0;
                content: '';
                border-bottom: 1px solid @border-color;
                transform: scaleY(0.5);
            }
            &::after {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 0;
                content: '';
                border-bottom: 1px solid @border-color;
                transform: scaleY(0.5);
            }
        }
    }
</style>